// 权限控制
import router from '@/router'
import store from '@/store'

// 引入 nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 引入获取用户基本信息的接口
import { getUserInfo, getUserInfoDetail } from '@/api/user'

// 引入所有的动态路由规则
import { asyncRoutes } from '@/router/asyncRoutes'
// console.log(asyncRoutes);

// 1. 登录的权限控制
// beforeEach 是路由的全局前置守卫，进入页面之前会触发
const WHITE_LIST = ['/login', '/404']
router.beforeEach(async (to, from, next) => {
  // 进入页面之前，开启进度条
  NProgress.start()
  const token = store.state.user.token
  if (token) {
    // token 存在，已经登录
    if (to.path === '/login') {
      // 去的是登录页，强制调整到后台主页
      next('/')
      // 手动关闭进度条
      NProgress.done()
    } else {
      // console.log('页面发生跳转了');
      // 这里是首次进入后台主页的位置
      if (!store.state.user.userInfo.username) {
        // 调用获取用户信息的接口
        const res = await getUserInfo()
        // 2. 左侧菜单的权限控制
        // 获取用户菜单权限数据
        // console.log(res);
        const menus = res.data.roles.menus
        // 筛选出员工可以看到的动态路由
        const filterRoutes = asyncRoutes.filter(item => {
          return menus.includes(item.children[0].name)
        })
        // console.log(filterRoutes);
        // 使用 router.addRoutes(路由规则) 方法，将筛选出来的员工能够看到的动态路由添加到路由系统中
        router.addRoutes(filterRoutes)
        // 调用 mutation 方法，将员工能够看到的动态路由传入。
        // 这个 mutation 方法内部，会将所有的静态路由和员工能够看到的动态路由数据组装在一起。
        store.commit('menu/setMenuList', filterRoutes)
        // console.log(to.path);
        // 调用获取用户详细信息的接口
        const res2 = await getUserInfoDetail(res.data.userId)
        // 将两个用户信息接口的数据组合到一起赋值给 全局数据 userInfo
        store.commit('user/setUserInfo', { ...res.data, ...res2.data })
        // 由于 addRoutes 方法是一个异步的方法，刷新时不会立即成效，所以页面也不会显示
        // 解决方案：重新进入一次该页面
        next({
          ...to,
          replace: true // 替换掉上一次的路由跳转记录
        })
        return
      }
      // 去的不是登录页，直接放行
      next()
    }
  } else {
    // token 不存在，没有登录
    if (WHITE_LIST.includes(to.path)) {
      // 要去的页面是白名单页面，直接放行
      next()
    } else {
      // 要去的页面不是白名单页面，强制跳转到登录
      next('/login')
      // 手动关闭进度条
      NProgress.done()
    }
  }
})

// 全局后置守卫，路由跳转结束，进入页面之后会触发
router.afterEach((to, from) => {
  // 进入页面之后，关闭进度条
  NProgress.done()
})

// console.log('执行了该文件的代码');
